<template>
  <view class="before-result-page-mbti">
    <navigationBar :emitBackEvent="true" @backEvent="backHandle" :my-property="navigationBarDataInfo" />
    <view class="fixed-right-tip" @click="backToSclList" v-if="showMoreSclBlock">
      更多测评
      <u-icon color="#7E3508" size="24rpx" name="arrow-right"></u-icon>
    </view>

    <template v-for="(img,index) in staticImgs.imgArr">
      <view class="img-wrapper" :class="{'img-wrapper-1':index===0}">
        <image class="img" :src="img" mode="widthFix"></image>

        <view class="box-wrapper-1-pos" v-if="index === 0">

          <view class="tit-img-box-abs" :style="{'top':topH+'rpx'}">
            <view class="tit-img-box">
              <!-- <image class="img" :src="staticImgs.titImg" mode="widthFix"></image> -->
              {{sclInfo.sclName}}
            </view>
          </view>

          <view class="first-small-btn" @click="confirmHandle"
            :style="{'background-image':`url(${staticImgs.mainBtnBg})`}">
            <view class="unit">¥</view>
            <view class="price">{{ nowPrice }}</view>
            <view>解锁你的专属报告</view>
            <view class="tip-box" :style="{'background-image':`url(${staticImgs.tipBg})`}" v-if="fixeBtnType === 4">
              已享{{sclInfo.discount}}折优惠
            </view>
            <view class="tip-box tip-box-2" v-else-if="fixeBtnType === 3">
              1元测
            </view>
          </view>

          <view v-if="sclInfo.discount" class="origin-price-box">原价：{{sclInfo.newOriginalPrice}}</view>
        </view>

      
      <view class="more-btn-wrapper" v-if="moreBtnObj[index]" :style="[moreBtnObj[index].sty]">
        <view class="more-btn-box" @click="confirmHandle">
          <image class="img" :src="staticImgs.smallBtnImg" mode="widthFix"></image>
        </view>
      </view>
      
      </view>
    
      
    </template>


    <view class="btn-wrapper-pos" v-if="showFixedBtn">
      <!-- 解锁专属报告 -->
      <view class="before-exit-btn-wrapper" :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
        @click="confirmHandle">
      </view>
    </view>

    <BeforeExitPayModal2 type="CRYL" @close="beforeExitPayClose_2" @confirm="beforeExitPayConfirm_2"
      :visible="modalVisible" />
  </view>
</template>

<script>
  import navigationBar from "@/components/navigationBar/navigationBar.vue";
  import BeforeExitPayModal from '@/subcontractorD/components/BeforeExitPayModal_1.vue'
  import BeforeExitPayModal2 from '@/subcontractorD/components/BeforeExitPayModal_2.vue'
  import {
    removeEmptyProperty
  } from '@/common/utils/util.js'
  import {
    orderPay
  } from '@/common/api/scl_api.js'
  import {
    debounce
  } from 'lodash'

  var app = getApp();
  export default {
    components: {
      navigationBar,
      BeforeExitPayModal,
      BeforeExitPayModal2
    },
    props: {
      scrollTopNum: {
        type: Number,
        default: 0
      },
      sclId: {
        type: String,
        default: '',
      },
      sclPayBack: {
        type: Boolean,
        default: true
      },
      sclInfo: {
        type: Object,
        default: {},
      },
    },
    data() {
      return {
        navigationBarDataInfo: {
          "bg_color": "transparent",
          "color": "#333",
          "flag": 1,
          "name": "",
          "hasEntity": false,
        },
        sclTime: this.$dayjs().format("YYYY-MM-DD HH:mm"),
        showMoreSclBlock: false,
        windowHeight: 99999,
        modalVisible: false,
        staticImgs: {
          imgArr: [
            this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/top-bg.jpg',
            this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/img-2.jpg',
            this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/img-3.jpg',
            this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/img-4.jpg',
            this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/img-5.jpg'
          ],
          arrowRight: this.imgBaseURL + '/scl/ad/MBTI/r-arrow.png',

          mainBtnBg: this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/main-btn.png',
          smallBtnImg: this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/small-btn-bg.png',
          titImg: this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/tit.png',
          
          tipBg: this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/tip-bg.png',
          
        },
        moreBtnObj:{
          '1':{
            sty:{
              bottom:'50%',
              left:'0',
              right:'0'
            }
          },
          '3':{
            sty:{
              bottom:'50%',
              left:'0',
              right:'0'
            }
          },
          '4':{
            sty:{
              bottom:'50%',
              left:'0',
              right:'0'
            }
          }
        },
        loading: false,
        showFixedBtn: false,
        hasTriggeredSpecificCondition: false,
        hasBackLock: true,
        reRenderLegend: false,
        legendNum: 0,
        topH: 0,
      }
    },
    computed: {
      fixeBtnType() {
        ///1:默认样式，2：一元带icon，3:一元不带icon，4:其他优惠券
        if (this.sclInfo && this.sclInfo.discountType === 4) {
          return 3
        } else if (this.sclInfo && this.sclInfo.discountUid) {
          return 4
        } else {
          return 1
        }
      },
      nowPrice() {
        return this.sclInfo?.discountPrice || this.sclInfo?.newOriginalPrice
      }
    },
    watch: {
      scrollTopNum(val) {
        this.showFixedBtn = val > this.windowHeight
      }
    },
    mounted() {
      const that = this
      uni.getSystemInfo({
        success(res) {
          that.windowHeight = res.windowHeight/res.devicePixelRatio
        }
      })
      this.topH = app.globalData.topHeight * 2
    },
    methods: {
      backHandle() {
        if (this.hasBackLock) {
          this.hasBackLock = false
          if (this.sclPayBack) {} else {
            this.modalVisible = true
          }
        } else {
          uni.reLaunch({
            url: '/pages/sclList/sclList'
          })
        }
      },
      backToSclList() {
        uni.reLaunch({
          url: '/pages/sclList/sclList'
        })
      },
      beforeExitPayClose_2() {
        this.modalVisible = false
      },
      beforeExitPayConfirm_2() {
        this.modalVisible = false
        uni.reLaunch({
          url: '/pages/sclList/sclList?userType=sclList'
        })
      },
      payHandle: debounce(async function(isDisPay) {
        if (this.loading) return
        uni.showLoading({
          title: "请求支付中..."
        })

        console.log(isDisPay, '=============isDisPay')

        this.loading = true
        const that = this
        const submitForm = removeEmptyProperty({
          sclId: this.sclId,
          orderType: '7',
          isAdditional: 'N',
          discountUid: this.$store.state.user.actCouponId,
          adClickId: uni.getStorageSync('adClickId'),
          isDisPay: (isDisPay == 'Y' || this.hasTriggeredSpecificCondition) ? 'Y' : 'N'
        })

        const {data:tmpRes} = await this.$u.api.getWxPayToken({
          sclId: this.sclId
        })
        submitForm.sclPayToken = tmpRes.data
        orderPay(submitForm).then(res => {

          if (res.data.code == 200) {
            uni.requestPayment({
              provider: 'wxpay',
              service: 5,
              orderInfo: res.data.data.wr,
              timeStamp: res.data.data.wr.timeStamp,
              nonceStr: res.data.data.wr.nonceStr,
              package: res.data.data.wr.packageValue,
              signType: res.data.data.wr.signType,
              paySign: res.data.data.wr.paySign,
              success: function(res) {
                that.$store.dispatch('user/getUserDiscountTakeEffect')
                that.$emit('payOk')
                setTimeout(()=>{
                  uni.hideLoading()
                  that.showPopup = false
                  that.loading = false
                },300)
              },
              fail: function(err) {
                that.$showToast('支付取消');
                uni.showLoading()
                that.showMoreSclBlock = true
                if (that.sclPayBack) {
                  that.modalVisible = true
                }
                setTimeout(()=>{
                  uni.hideLoading()
                  that.showPopup = false
                  that.loading = false
                },300)
              }
            });
          } else {
            that.$showToast(res.data.message);
            setTimeout(()=>{
              uni.hideLoading()
              that.showPopup = false
              that.loading = false
            },300)
          }
        }).catch(e=>{
          setTimeout(()=>{
            this.showPopup = false
            this.loading = false
          },300)
        })

      }, 500),
      preConfirmHandle() {
        this.payHandle()
      },
      confirmHandle() {
        this.useSubscription(this.preConfirmHandle)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .before-result-page-mbti {
    padding-bottom: 10vh;
    background-color: rgba(255, 238, 240, 1);
    position: relative;

    .fixed-right-tip {
      width: 182rpx;
      height: 50rpx;
      column-gap: 14rpx;

      background: linear-gradient(180deg, #FDE591 0%, #FFCE66 100%);
      border-radius: 32rpx 0rpx 0rpx 32rpx;

      position: fixed;
      right: 0;
      top: 280rpx;
      z-index: 24;

      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding-left: 20rpx;

      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #7E3508;
      // line-height: 40rpx;
      text-align: center;
      font-style: normal;
    }


    .img-wrapper-1 {
      height: 914rpx;
      overflow: hidden;
    }

    .img-wrapper {
      position: relative;

      >.img {
        width: 750rpx;
      }
      

    }

    // .img-wrapper -- end
    
    
    .more-btn-wrapper{
      position: absolute;
    }
    
    .more-btn-box {
      width: 400rpx;
      height: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: auto;
    
      margin-top: 40rpx;
    
      .img {
        width: 100%;
        height: 100%;
      }
    }
    
    
    .btn-wrapper-pos {
      position: fixed;
      bottom: 7vh;

      left: 0;
      right: 0;

      display: flex;
      justify-content: center;

      .before-exit-btn-wrapper {
        width: 400rpx;
        height: 100rpx;

        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;

        background-repeat: no-repeat;
        background-size: 100% 100%;

        .price-box {
          display: flex;
          align-items: flex-end;

          .unit {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #FFFFFF;
            line-height: 37rpx;

            font-style: normal;
            margin-bottom: 4rpx;
            margin-right: 4rpx;
          }

          .num {
            font-family: HelveticaNeue, HelveticaNeue;
            font-weight: 500;
            font-size: 50rpx;
            color: #FFFFFF;
            line-height: 61rpx;

            font-style: normal;
          }
        }

        .btn-text {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 30rpx;
          color: #FFFFFF;
          line-height: 42rpx;
          text-align: center;
          font-style: normal;
          margin-left: 12rpx;
        }
      }


      
    }
    
    

    .popup-wrapper {
      width: 750rpx;
      min-height: 502rpx;
      background: #FFFFFF;
      border-radius: 40rpx 40rpx 0rpx 0rpx;
      box-sizing: border-box;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);

      .pay-btn {
        width: 560rpx;
        height: 94rpx;
        border-radius: 45rpx;

        display: flex;
        justify-content: center;
        margin: auto;
        margin-top: 40rpx;
        align-items: center;

        // padding-top: 68rpx;

        background-repeat: no-repeat;
        background-size: contain;
        box-sizing: border-box;

        .u-icon {
          height: fit-content;
        }

        .text {
          font-family: PingFang-SC, PingFang-SC;

          font-size: 32rpx;
          color: #FFFFFF;
          line-height: 42rpx;
          text-align: left;
          font-style: normal;
          margin-left: 10rpx;
        }
      }
    }
  }



  .box-wrapper-1-pos {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    .tit-img-box-abs {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .tit-img-box {
      width: 522rpx;
      height: 50rpx;

      .img {
        width: 100%;
        // height: 100%;
      }
      
      height: 50rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 800;
      font-size: 46rpx;
      color: #984B29;
      line-height: 52rpx;
      text-stroke: 3px #FFFFFF;
      text-align: center;
      width: 660rpx;
      font-style: normal;
      word-break: keep-all;
      text-shadow: -4rpx -4rpx 10rpx #fff;
    }

    .origin-price-box {
      margin-top: -24rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: rgba(211, 135, 139, 1);
      line-height: 37rpx;
      text-align: center;
      font-style: normal;

      position: relative;
      margin-bottom: 36rpx;
      &::before {
        position: absolute;
        left: -10rpx;
        right: -10rpx;
        content: ' ';
        top: 50%;
        transform: translateY(-50%);
        border-top: 1px solid rgba(211, 135, 139, 1);

      }
    }

    .first-small-btn {
      margin-top: 246rpx;

      width: 660rpx;
      height: 190rpx;
      box-sizing: border-box;
      position: relative;

      background-repeat: no-repeat;
      background-size: 100% 100%;

      display: flex;
      // align-items: center;
      padding-top: 64rpx;
      justify-content: center;

      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #FFFFFF;

      font-style: normal;
      

      .unit {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        margin-top: 9rpx;

        margin-top: 4rpx;
        margin-right: 4rpx;
      }

      .price {
        font-size: 40rpx;
        margin-right: 10rpx;
        margin-top: -4rpx;
      }


      .tip-box {
        position: absolute;
        right: 84rpx;
        top: 14rpx;
        // bottom: 86rpx;

        // width: 200rpx;
        
        padding: 4rpx 22rpx;
        height: 46rpx;

        background-repeat: no-repeat;
        background-size: 100% 100%;
        

        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #FFFFDA;
        line-height: 40rpx;
        text-align: center;
        font-style: normal;

        box-sizing: border-box;
        // padding-top: 4rpx;
      }
      
      .tip-box-2{
        border-radius: 23rpx 23rpx 23rpx 0rpx;
        background: linear-gradient(180deg, rgba(248, 157, 255, 1) 0%, rgba(241, 85, 235, 1) 100%);
      }

    }


  }


  .dashed-line {
    margin: auto;
    width: 694rpx;
    height: 1rpx;
    margin-top: 64rpx;

    background-image: repeating-linear-gradient(to right,
        #A9C4F2,
        #A9C4F2 10rpx,
        transparent 10rpx,
        transparent 20rpx);
  }
</style>